<template>
  <div class="data-dictionary-wrapper">
    <el-row :gutter="20" style="height: 100%;">
      <el-col :span="5" style="height: 100%;">
        <el-button class="add-btn" type="primary" @click="popNewAddDialog1" size="medium">增加数据字典项</el-button>
        <el-scrollbar class="tree-scrollbar">
          <ul class="dictionary-menu">
            <li :class="curDicItemId===item.id?'active':''"
             v-for="(item) in dicItem"
             :key="item.id"
             @click="dicItemClick(item.id)">
              {{item.itemName}}
              <div class="operation">
                <el-link type="primary" :underline="false" icon="el-icon-edit" @click="editDicItemDetail(item.id)">编辑</el-link>&nbsp;
                <el-link type="danger" :underline="false" icon="el-icon-delete" @click.stop="deleteDicItem(item.id)">删除</el-link>
              </div>
            </li>
          </ul>
        </el-scrollbar>
      </el-col>
      <el-col :span="19" style="height: 100%;">
        <div class="btn-inline">
          <el-button size="medium" type="primary" @click="popNewAddDialog2">增加数据字典值</el-button>
        </div>
        <el-table :data="tableData" ref="multipleTable" @selection-change="selectionChange" :height="tableHeight"  v-loading="loading" stripe>
          <el-table-column width="20"></el-table-column>
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="数据编码" prop="dataCode"></el-table-column>
          <el-table-column label="数据名称" prop="dataName"></el-table-column>
          <el-table-column label="数据描述" prop="dataDesc" show-overflow-tooltip></el-table-column>
          <el-table-column label="数据排序编号" prop="orderNo"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" icon="el-icon-edit" @click="editDetail(scope.row.id)">编辑</el-link>&nbsp;
              <el-link type="danger" :underline="false" icon="el-icon-delete" @click="deleteDetail(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 对话框1 开始 -->
    <el-dialog title="数据字典项" :visible.sync="dialogFormVisible1" width="660px" @closed="closeDialog1">
      <el-form :model="dialogForm1" class="dialog-form-comot" :disabled="dialogMode===CNST.READ_MODE" :rules="rules1" ref="ruleDialog1">
        <el-form-item label="数据项编号" label-width="100px" prop="itemCode">
          <el-input v-model="dialogForm1.itemCode" placeholder="请输入数据项编号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据项名称" label-width="100px" prop="itemName">
          <el-input v-model="dialogForm1.itemName" placeholder="请输入数据项名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据项描述" label-width="100px" prop="itemDesc">
          <el-input v-model="dialogForm1.itemDesc" placeholder="请输入数据项描述" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submitOrg1" v-if="dialogMode!==CNST.READ_MODE">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 对话框1 结束 -->
    <!-- 对话框2 开始 -->
    <el-dialog title="数据字典值" :visible.sync="dialogFormVisible2" width="660px" @closed="closeDialog2">
      <el-form :model="dialogForm2" class="dialog-form-comot" :disabled="dialogMode===CNST.READ_MODE" :rules="rules2" ref="ruleDialog2">
        <el-form-item label="数据编码" label-width="110px" prop="dataCode">
          <el-input v-model="dialogForm2.dataCode" placeholder="请输入数据编码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据名称" label-width="110px" prop="dataName">
          <el-input v-model="dialogForm2.dataName" placeholder="请输入数据名称" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据描述" label-width="110px" prop="dataDesc">
          <el-input v-model="dialogForm2.dataDesc" placeholder="请输入数据描述" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据排序编号" label-width="110px" prop="orderNo">
          <el-input v-model="dialogForm2.orderNo" placeholder="请输入数据排序编号" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submitOrg2" v-if="dialogMode!==CNST.READ_MODE">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 对话框2 结束 -->
  </div>
</template>

<script>
import {
  getDictionaryItem,
  addDictionaryItem,
  getDictionaryItemDetail,
  updateDictionaryItem,
  deleteDictionaryItem,
  getDictionaryDataById,
  addDictionaryData,
  getDictionaryDataDetail,
  updateDictionaryData,
  deleteDictionaryData
} from '@/api/systemManage'
import { deepClone } from '@/utils'
export default {
  name: 'DataDictionary',
  data () {
    return {
      dicItem: [],
      tableHeight: window.innerHeight - 300,
      multipleSelection: [],
      tableData: [],
      loading: false,
      dialogFormVisible1: false,
      curDicItemId: '',
      dialogForm1: {
        itemCode: '',
        itemName: '',
        itemDesc: ''
      },
      dialogMode: '',
      rules1: {
        itemCode: [{ required: true, message: '请输入数据项编号', trigger: 'blur' }],
        itemName: [{ required: true, message: '请输入数据项名称', trigger: 'blur' }],
        itemDesc: [{ required: true, message: '请输入数据项描述', trigger: 'blur' }]
      },
      dialogFormVisible2: false,
      curDicDataId: '',
      dialogForm2: {
        dataCode: '',
        dataName: '',
        dataDesc: '',
        orderNo: ''
      },
      rules2: {
        dataCode: [{ required: true, message: '请输入数据编码', trigger: 'blur' }],
        dataName: [{ required: true, message: '请输入数据名称', trigger: 'blur' }],
        dataDesc: [{ required: true, message: '请输入数据描述', trigger: 'blur' }],
        orderNo: [{ required: true, message: '请输入数据排序编号', trigger: 'blur' }]
      }
    }
  },
  methods: {
    getDicItemAndShow () {
      getDictionaryItem().then((res) => {
        this.dicItem = res.data.queryResult
        if (this.dicItem.length > 0) {
          this.curDicItemId = this.dicItem[0].id
          this.getDicDataAndShow(this.curDicItemId)
        }
      })
    },
    getDicDataAndShow (itemId) {
      getDictionaryDataById({ itemId }).then((res) => {
        this.tableData = res.data.queryResult
      })
    },
    showToDialog (data, target) {
      for (let key in data) {
        if (target.hasOwnProperty(key)) {
          target[key] = data[key]
        }
      }
    },
    dicItemClick (itemId) {
      this.curDicItemId = itemId
      this.getDicDataAndShow(itemId)
    },
    editDicItemDetail (id) {
      this.dialogFormVisible1 = true
      this.dialogMode = this.CNST.EDIT_MODE
      this.curDicItemId = id
      getDictionaryItemDetail({ id }).then((res) => {
        this.showToDialog(res.data, this.dialogForm1)
      })
    },
    deleteDicItem (id) {
      this.$confirm('确定删除, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDictionaryItem({ id }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getDicItemAndShow()
        })
      })
    },
    selectionChange (valArr) {
      this.multipleSelection = valArr
    },
    popNewAddDialog1 () {
      this.dialogFormVisible1 = true
      this.dialogMode = this.CNST.ADDNEW_MODE
    },
    popNewAddDialog2 () {
      this.dialogFormVisible2 = true
      this.dialogMode = this.CNST.ADDNEW_MODE
    },
    editDetail (id) {
      this.dialogMode = this.CNST.EDIT_MODE
      this.dialogFormVisible2 = true
      this.curDicDataId = id
      getDictionaryDataDetail({ id }).then((res) => {
        this.showToDialog(res.data, this.dialogForm2)
      })
    },
    deleteDetail (id) {
      this.$confirm('确定删除, 是否继续?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        deleteDictionaryData({ id }).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getDicDataAndShow(this.curDicItemId)
        })
      })
    },
    closeDialog1 () {
      // 弹框关闭后重置表单验证
      this.$refs.ruleDialog1.resetFields()
      // 清空弹框内表单数据
      for (let key in this.dialogForm1) {
        this.dialogForm1[key] = ''
      }
      this.dialogMode = ''
    },
    closeDialog2 () {
      // 当前点击查看或编辑列表项的id置空
      this.curDicDataId = ''
      // 弹框关闭后重置表单验证
      this.$refs.ruleDialog2.resetFields()
      // 清空弹框内表单数据
      for (let key in this.dialogForm2) {
        this.dialogForm2[key] = ''
      }
      this.dialogMode = ''
    },
    submitOrg1 () {
      this.$refs.ruleDialog1.validate((valid) => {
        if (valid) {
          let requestData = deepClone(this.dialogForm1)
          if (this.dialogMode === this.CNST.ADDNEW_MODE) {
            addDictionaryItem(requestData).then((res) => {
              this.$message({
                message: '新增数据项成功',
                type: 'success'
              })
              this.getDicItemAndShow()
              this.dialogFormVisible1 = false
            })
          } else if (this.dialogMode === this.CNST.EDIT_MODE) {
            // 修改字典项
            requestData.id = this.curDicItemId
            updateDictionaryItem(requestData).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getDicItemAndShow()
              this.dialogFormVisible1 = false
            })
          }
        } else {
          return false
        }
      })
    },
    submitOrg2 () {
      this.$refs.ruleDialog2.validate((valid) => {
        if (valid) {
          let requestData = deepClone(this.dialogForm2)
          if (this.dialogMode === this.CNST.ADDNEW_MODE) {
            requestData.itemId = this.curDicItemId
            requestData.upDataId = this.curDicItemId
            addDictionaryData(requestData).then((res) => {
              this.$message({
                message: '新增字典值成功',
                type: 'success'
              })
              this.getDicDataAndShow(this.curDicItemId)
              this.dialogFormVisible2 = false
            })
          } else if (this.dialogMode === this.CNST.EDIT_MODE) {
            // 修改字典值
            requestData.id = this.curDicDataId
            updateDictionaryData(requestData).then((res) => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.getDicDataAndShow(this.curDicItemId)
              this.dialogFormVisible2 = false
            })
          }
        } else {
          return false
        }
      })
    }
  },
  created () {
    this.getDicItemAndShow()
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.data-dictionary-wrapper {
  height: calc(100vh - 210px);
  min-height: 500px;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 10px 10px 22px -2px #d2d6da;
  border-radius: 3px;
  .add-btn {
    margin-bottom: 10px;
  }
  .tree-scrollbar {
    height: calc(100% - 50px);
  }
  .dictionary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #4e4e4e;
    >li {
      cursor: pointer;
      padding: 4px 0;
      margin: 4px 0;
      overflow: hidden;
      &:hover {
        color: #969696;
      }
      &.active {
        color: #00b6ff;
      }
      .operation {
        float: right;
        font-size: 12px;
        margin-right: 10px;
        .el-link {
          font-weight: normal;
          font-size: 12px;
        }
      }
    }
  }
  .btn-inline {
    margin-bottom: 14px;
  }
}
</style>
<style lang="scss">
.data-dictionary-wrapper {
  .el-table {
    .el-table__header-wrapper {
      .el-table__header {
        background-color: #f2f5f7;
      }
    }
  }
}
</style>
